<template>
	<view>
		<u-tabbar
			:value="menu_value_xuanzhong"
			:fixed="true"
			:activeColor="color"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item
			 v-for="(item,index) in menus" :key="index"
			 :text="item.text" :icon="item.icon" @click="onClick(item.url)"></u-tabbar-item>
		    </u-tabbar>
	</view>
</template>

<script>
import { toast, useRouter } from '@/utils/utils.js';
export default {
	name: "my-tabbar",
	data() {
		return {
			menu_value_xuanzhong: 0 ,// 默认选中首页
			menus:[
				{
					text:'首页',
					icon:'grid',
					icon1:'grid-fill',
					url:'pages/index/index'
				},
				{
					text:'我的',
					icon:'account',
					icon1:'account-fill',
					url:'pages/index/user'
				}
			]
		};
	},
	props: {
		color: {
			type: String,
			default: "#333333"
		}
	},
	mounted() {
		// 小程序环境下初始化menu_value
		this.updateMenuValue();
	},
	methods: {
		getCurrentPageUrl() {
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			return currentPage.route;
		},
		updateMenuValue() {
			const path = this.getCurrentPageUrl();
			const index = this.menus.findIndex(item => item.url === path);
			this.menus[index].icon=this.menus[index].icon1
			this.menu_value_xuanzhong = index;
		},
		onClick(url) {
			useRouter('/'+url, {}, 'switchTab');
			this.updateMenuValue();
		}
	}
};
</script>

<style>

</style>